/* context-menu 界面行为组工具栏 start */
$context-menu: (item-margin: 0 0 0 4px,
separator-height: 20px,
separator-width: 2px,
separator-color: getCssVar(color, border),
popover-padding: 8px 0,
popover-button-padding: 8px 20px,
popover-button-color: getCssVar(color, text, 2),
popover-button-hover-bg: getCssVar(color, bg, 0),
);

/* context-menu 界面行为组工具栏 end */

@include b(context-menu) {
  @include set-component-css-var(context-menu, $context-menu);

  @include e(item) {
    padding: getCssVar(spacing, extra-tight) 0;

    &+& {
      margin: getCssVar(context-menu, item-margin);
    }

    .#{bem('context-menu','action-content-icon')} {
        margin-right: 3px;  
    }
  }

  @include e('action-content'){
    display: flex;
  }


  @include e('action-content-icon') {
    @include flex(row, center, center);

    width: 20px;
  }

  @include e('action-content-caption'){
    @include flex(row, center, center);
  }

  @include e(popover) {
    @include set-component-css-var(context-menu, $context-menu);

    // 这个是为了解决el-popover的宽度问题 必须要加 !important 
    width: auto !important;
    min-width: 150px;

    --el-popover-padding:#{getCssVar(context-menu, popover-padding)};

    .el-button {
      --el-button-size: 40px;

      display: block;
      width: 100%;
      padding: getCssVar(context-menu, popover-button-padding);
      margin: 0;
      font-size: 14px;
      color: getCssVar(context-menu, popover-button-color);
      text-align: left;
      border-radius: 0;

      &:hover {
        background-color: getCssVar(context-menu, popover-button-hover-bg);
      }

      .#{bem('context-menu','action-content-icon')} {
        margin-right: 6px;
      }
    }

    @include e(separator) {
      margin: 0;
    }
  }

  @include m(dropdown) {
    @include e(caption) {
      cursor: pointer;
    }

    @include e(caption-icon) {
      vertical-align: bottom;
    }
  }
}